<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .test{
            width: 150px;
            height: 150px;
            border: 1px solid #d1d1d1;
            overflow: hidden;
            float: left;
        }
        .pic-in{
            width: 50px;
            height: 50px;
            background: #999999;
            position: relative;
            top: 50%;
            left: 50%;
            margin: -25px 0 0 -25px;
            border-radius: 50%;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="test"></div>
<div class="test"></div>
</body>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
    $(function(){
        $('.test').html('<div class="pic-in"></div>');
    });
    $(document).on('click','.pic-in',function(){  //给未来元素绑定事件
        var index=$(this).index('.pic-in'),_len=$('.pic-in').length,_i;
        if($(this).width()==50){
            for(_i=0;_i<_len;_i++){
                if(_i!=index){
                    $('.pic-in').eq(_i).animate({width:'50px',height:'50px','margin':'-25px 0 0 -25px'},100);
                }
            }
            $(this).animate({width:'350px',height:'350px','margin':'-175px 0 0 -175px'},100);
        }
    });
</script>
</html>